<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="FastAdmin">
    <title>MicroTest</title>
    <link href="html/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 70px;
            margin-bottom: 15px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-family: "Roboto", "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", BlinkMacSystemFont, -apple-system, "Segoe UI", "Microsoft Yahei", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            font-weight: 400;
        }

        h2 {
            font-size: 1.6em;
        }

        hr {
            margin-top: 10px;
        }

        .tab-pane {
            padding-top: 10px;
        }

        .mt0 {
            margin-top: 0px;
        }

        .footer {
            font-size: 12px;
            color: #666;
        }

        .label {
            display: inline-block;
            min-width: 65px;
            padding: 0.3em 0.6em 0.3em;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }

        .popover {
            max-width: 400px;
            max-height: 400px;
            overflow-y: auto;
        }

        .header-div {
            padding: 0px;
        }

        .header-div-left {
            float: left;
        }

        .header-div-right {
            float: right;
        }

        .clear {
            clear: both
        }
        .label-success {
            background-color: #18bc9c;
        }
        .btn-success {
            color: #fff;
            background-color: #18bc9c;
            border-color: white;
        }
        .navbar-default {
            background-color: #18bc9c;
            border-color: #18bc9c;
        }
        .navbar-default .navbar-brand {
            color: white;
        }
        body{
            color: #d9534f;
        }
        .form-group{
            color: white;
        }
    </style>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MicroTest</a>
        </div>
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <div class="form-group">Token:</div>
                <div class="form-group">
                    <input type="text" class="form-control input-sm" data-toggle="tooltip"
                           title="Token在会员注册或登录后都会返回,WEB端同时存在于Cookie中" placeholder="token" id="token"/>
                </div>
                <div class="form-group">Apiurl:</div>
                <div class="form-group">
                    <input id="apiUrl" type="text" class="form-control input-sm" data-toggle="tooltip" title="API接口URL"
                           placeholder="http://127.0.0.1/" value=""/>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-success btn-sm" data-toggle="tooltip"
                            title="点击保存后Token和Api url都将保存在本地Localstorage中" id="save_data">
                        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                    </button>
                </div>
            </form>
        </div><!--/.nav-collapse -->
    </div>
</div>

<div class="container">
    <div class="panel-group" id="accordion">
        <div id="data-div">没有找到相关记录.</div>
        <hr>
        <!-- end -->
        <div class="row mt0 footer">
            <div class="col-md-6" align="left">Generated on 2018-04-06 19:15:01</div>
            <div class="col-md-6" align="right">
                <a href="#">MicroTest</a>
            </div>
        </div>
    </div> <!-- /container -->
    <script src="html/jquery.min.js"></script>
    <script src="html/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function trim(str) {
                if (str == null || typeof str == "undefined") {
                    return "";
                }

                return str.replace(/(^\s*)|(\s*$)/g, "");
            }

            function isBlank(str) {
                if (str == null || typeof str == "undefined" || str == "" || trim(str) == "") {
                    return true;
                }

                return false;
            }

            $.ajax({
                type: "post",
                url: '../api',
                data: JSON.stringify("{}"),
                dataType: 'json',
                success: function (data) {
                    var showBody = "";
                    $.each(data, function (index, value, array) {
                        console.log(value)
                        showBody += "<span style='float: left;text-align: left;font-size: 16px;font-weight: 900;";
                        // 设置是否弃用
                        if (value.deprecated) {
                            showBody += "text-decoration:line-through;";
                        }
                        showBody += "'>";

                        // 名称
                        showBody += value.name;

                        // 标题
                        if (!isBlank(value.title)) {
                            showBody += " " + value.title;
                        }

                        // 作者
                        if (!isBlank(value.author)) {
                            showBody += "（" + value.author + "）";
                        }
                        showBody += "</span>";
                        showBody += "<span style='float: right;text-align: right;'>";

                        // 版本号
                        if (!isBlank(value.version)) {
                            showBody += value.version;
                        }

                        // 日期
                        if (!isBlank(value.since)) {
                            showBody += " " + value.since;
                        }
                        showBody += "</span>";

                        // 清除格式
                        showBody += "<div class='clear'></div>";

                        // 其它模块
                        showBody += "<hr style='margin-top: 0;margin-bottom: 0'/>";
                        $.each(value.methods, function (methodIndex, methodValue, methodArray) {
                            showBody += "<div class='panel panel-default' style='margin-bottom: 10px'>" +
                                "    <div class='panel-heading'>" +
                                "        <h4 class='panel-title'>" +
                                "            <span class='label label-success'>GET</span>" +
                                "            <a data-toggle='collapse' data-parent='#accordion" + index + "-" + methodIndex + "' href='#collapseOne" + index + "-" + methodIndex + "' style='";
                            // 设置是否弃用
                            if (methodValue.deprecated) {
                                showBody += "text-decoration:line-through;";
                            }
                            showBody += "'> " + methodValue.name;

                            // 设置标题
                            if (!isBlank(methodValue.title)) {
                                showBody += " <span style='font-size: 13px'>" + methodValue.title + "</span>";
                            }
                            // 设置作者
                            if (!isBlank(methodValue.author)) {
                                showBody += "（" + methodValue.author + "）";
                            }

                            showBody += "</a></h4></div>" +
                                "    <div id='collapseOne" + index + "-" + methodIndex + "' class='panel-collapse collapse'>" +
                                "        <div class='panel-body'>\n" +
                                "            <!-- Nav tabs -->\n" +
                                "            <ul class='nav nav-tabs' id='doctab" + index + "-" + methodIndex + "'>\n" +
                                "                <li class='active'><a href='#info" + index + "-" + methodIndex + "' data-toggle='tab'>描述信息</a></li>" +
                                "                <li><a href='#sandbox" + index + "-" + methodIndex + "' data-toggle='tab'>在线测试</a></li>" +
                                "                <li><a href='#sample" + index + "-" + methodIndex + "' data-toggle='tab'>返回示例</a></li>" +
                                "            </ul>" +
                                "            <!-- Tab panes -->" +
                                "            <div class='tab-content'>" +
                                "                <div class='tab-pane active' id='info" + index + "-" + methodIndex + "'>" +
                                "                    <div class='well'>";
                            if (!isBlank(methodValue.author)) {
                                showBody += methodValue.apiNote;
                            } else {
                                showBody += "暂无相关描述"
                            }
                            showBody += "</div>" +
                                "                    <div class='panel panel-default'>" +
                                "                        <div class='panel-heading'><strong>Headers</strong></div>" +
                                "                        <div class='panel-body'>无</div>" +
                                "                    </div>" +
                                "                    <div class='panel panel-default'>" +
                                "                        <div class='panel-heading'><strong>参数</strong></div>" +
                                "                        <div class='panel-body'>" +
                                "                            <table class='table table-hover'>" +
                                "                                <thead>" +
                                "                                <tr>" +
                                "                                    <th>名称</th>" +
                                "                                    <th>类型</th>" +
                                "                                    <th>必选</th>" +
                                "                                    <th>描述</th>" +
                                "                                </tr>" +
                                "                                </thead>" +
                                "                                <tbody>";

                            $.each(methodValue.parameters, function (parameterIndex, parameterValue, parameterArray) {
                                showBody += "<tr>" +
                                    "   <td>" + parameterValue.name + "</td>" +
                                    "   <td>" + parameterValue.typeName + "</td>" +
                                    "   <td>是</td>" +
                                    "   <td>" + parameterValue.title + "</td>" +
                                    "</tr>";
                            });

                            showBody += "</tbody></table></div></div>" +
                                "                    <div class='panel panel-default'>" +
                                "                        <div class='panel-heading'><strong>正文</strong></div>" +
                                "                        <div class='panel-body'>无</div>" +
                                "                    </div>" +
                                "                </div>" +
                                "                <div class='tab-pane' id='sandbox" + index + "-" + methodIndex + "'>" +
                                "                    <div class='row'>" +
                                "                        <div class='col-md-12'>" +
                                "                            <div class='panel panel-default'>" +
                                "                                <div class='panel-heading'><strong>参数</strong></div>" +
                                "                                <div class='panel-body'>" +
                                "                                    <form enctype='application/x-www-form-urlencoded' role='form' action='/api/common/init' method='get' name='form0' id='form0'>" +
                                "                                        <div class='form-group'>" +
                                "                                            <label class='control-label' for='version'>version</label>" +
                                "                                            <input type='string' class='form-control input-sm' id='version' required placeholder='版本号' name='version'>" +
                                "                                        </div>" +
                                "                                        <div class='form-group'>" +
                                "                                            <label class='control-label' for='lng'>lng</label>" +
                                "                                            <input type='string' class='form-control input-sm' id='lng' required placeholder='经度' name='lng'>" +
                                "                                        </div>" +
                                "                                        <div class='form-group'>" +
                                "                                            <label class='control-label' for='lat'>lat</label>" +
                                "                                            <input type='string' class='form-control input-sm' id='lat' required placeholder='纬度' name='lat'>" +
                                "                                        </div>" +
                                "                                        <div class='form-group'>" +
                                "                                            <button type='submit' class='btn btn-success send' rel='0'>提交</button>" +
                                "                                        </div>" +
                                "                                    </form>" +
                                "                                </div>" +
                                "                            </div>" +
                                "                            <div class='panel panel-default'>" +
                                "                                <div class='panel-heading'><strong>响应输出</strong></div>" +
                                "                                <div class='panel-body'>" +
                                "                                    <div class='row'>" +
                                "                                        <div class='col-md-12' style='overflow-x:auto'>" +
                                "                                            <pre id='response_headers" + index + "-" + methodIndex + "'></pre>" +
                                "                                            <pre id='response" + index + "-" + methodIndex + "'></pre>" +
                                "                                        </div>" +
                                "                                    </div>" +
                                "                                </div>" +
                                "                            </div>" +
                                "                            <div class='panel panel-default'>" +
                                "                                <div class='panel-heading'><strong>返回参数</strong></div>" +
                                "                                <div class='panel-body'>无</div>" +
                                "                            </div>" +
                                "                        </div>" +
                                "                    </div>" +
                                "                </div>" +
                                "                <div class='tab-pane' id='sample" + index + "-" + methodIndex + "'>" +
                                "                    <div class='row'>" +
                                "                        <div class='col-md-12'>" +
                                "                            <pre id='sample_response" + index + "-" + methodIndex + "'>无</pre>" +
                                "                        </div>" +
                                "                    </div>" +
                                "                </div>" +
                                "            </div>" +
                                "        </div>" +
                                "    </div>" +
                                "</div>";
                        });
                    });
                    $('#data-div').html(showBody);
                }
            })
            ;
        })
        ;
    </script>

    <script type="text/javascript">
        function syntaxHighlight(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }

        function prepareStr(str) {
            try {
                return syntaxHighlight(JSON.stringify(JSON.parse(str.replace(/'/g, '"')), null, 2));
            } catch (e) {
                return str;
            }
        }

        var storage = (function () {
            var uid = new Date;
            var storage;
            var result;
            try {
                (storage = window.localStorage).setItem(uid, uid);
                result = storage.getItem(uid) == uid;
                storage.removeItem(uid);
                return result && storage;
            } catch (exception) {
            }
        }());

        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (!this.value) {
                    return;
                }
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        $(document).ready(function () {
            if (storage) {
                $('#token').val(storage.getItem('token'));
                $('#apiUrl').val(storage.getItem('apiUrl'));
            }

            $('[data-toggle="tooltip"]').tooltip({
                placement: 'bottom'
            });

            $('code[id^=response]').hide();
            $.each($('pre[id^=sample_response],pre[id^=sample_post_body]'), function () {
                if ($(this).html() == 'NA') {
                    return;
                }
                var str = prepareStr($(this).html());
                $(this).html(str);
            });

            $("[data-toggle=popover]").popover({placement: 'right'});
            $('[data-toggle=popover]').on('shown.bs.popover', function () {
                var $sample = $(this).parent().find(".popover-content"),
                    str = $(this).data('content');
                if (typeof str == "undefined" || str === "") {
                    return;
                }
                var str = prepareStr(str);
                $sample.html('<pre>' + str + '</pre>');
            });

            $('body').on('click', '#save_data', function (e) {
                if (storage) {
                    storage.setItem('token', $('#token').val());
                    storage.setItem('apiUrl', $('#apiUrl').val());
                } else {
                    alert('Your browser does not support local storage');
                }
            });

            $('body').on('click', '.send', function (e) {
                e.preventDefault();
                var form = $(this).closest('form');
                //added /g to get all the matched params instead of only first
                var matchedParamsInRoute = $(form).attr('action').match(/[^{]+(?=\})/g);
                var theId = $(this).attr('rel');
                //keep a copy of action attribute in order to modify the copy
                //instead of the initial attribute
                var url = $(form).attr('action');
                var formData = new FormData();
                $(form).find('input').each(function (i, input) {
                    if ($(input).attr('type') == 'file') {
                        formData.append($(input).attr('name'), $(input)[0].files[0]);
                    } else {
                        formData.append($(input).attr('name'), $(input).val())
                    }
                });

                var index, key, value;

                if (matchedParamsInRoute) {
                    var params = {};
                    formData.forEach(function (value, key) {
                        params[key] = value;
                    });
                    for (index = 0; index < matchedParamsInRoute.length; ++index) {
                        try {
                            key = matchedParamsInRoute[index];
                            value = params[key];
                            if (typeof value == "undefined")
                                value = "";
                            url = url.replace("\{" + key + "\}", value);
                            formData.delete(key);
                        } catch (err) {
                            console.log(err);
                        }
                    }
                }

                var headers = {};
                var token = $('#token').val();
                if (token.length > 0) {
                    headers['token'] = token;
                }

                $("#sandbox" + theId + " .headers input[type=text]").each(function () {
                    val = $(this).val();
                    if (val.length > 0) {
                        headers[$(this).prop('name')] = val;
                    }
                });

                $.ajax({
                    url: $('#apiUrl').val() + url,
                    data: $(form).attr('method') == 'get' ? $(form).serialize() : formData,
                    type: $(form).attr('method') + '',
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    headers: headers,
                    success: function (data, textStatus, xhr) {
                        if (typeof data === 'object') {
                            var str = JSON.stringify(data, null, 2);
                            $('#response' + theId).html(syntaxHighlight(str));
                        } else {
                            $('#response' + theId).html(data || '');
                        }
                        $('#response_headers' + theId).html('HTTP ' + xhr.status + ' ' + xhr.statusText + '<br/><br/>' + xhr.getAllResponseHeaders());
                        $('#response' + theId).show();
                    },
                    error: function (xhr, textStatus, error) {
                        try {
                            var str = JSON.stringify($.parseJSON(xhr.responseText), null, 2);
                        } catch (e) {
                            var str = xhr.responseText;
                        }
                        $('#response_headers' + theId).html('HTTP ' + xhr.status + ' ' + xhr.statusText + '<br/><br/>' + xhr.getAllResponseHeaders());
                        $('#response' + theId).html(syntaxHighlight(str));
                        $('#response' + theId).show();
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>